<!--es6-->
<!DOCTYPE html>
<html lang="">
<head>
    <title>寻找小狼人</title>
    <meta charset="utf-8"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="content">
    <p id="gameText"></p>
    <ul></ul>
    <div class="btnbox">
        <button class="btn">寻找狼人</button>
    </div>
</div>
<script src="./js/myarray.js"></script>
<script>
    let content = document.querySelector("#content ul");
    let cardList = [
        {
            id: 1,
            category: "werewolf",
            name: "小狼人",
        },
        {
            id: 2,
            category: "werewolf",
            name: "小狼人",
        },
        {
            id: 3,
            category: "hunter",
            name: "猎人",
        },
        {
            id: 4,
            category: "poor",
            name: "平民",
        },
        {
            id: 5,
            category: "witch",
            name: "女巫",
        },
        {
            id: 6,
            category: "prophet",
            name: "预言家",
        },
        {
            id: 7,
            category: "poor",
            name: "平民",
        },
        {
            id: 8,
            category: "werewolf",
            name: "黑狼王",
        },
        {
            id: 9,
            category: "poor",
            name: "平民",
        },
    ];
    for (let index = 0; index < cardList.length; index++) {
        const element = cardList[index];
        content.innerHTML += `<li>
                <a href="javascript:void(0)">
                    <div class="z">
                     <img src="./images/card.svg" alt="">
                    </div>
                    <div class="b">
                        <h1>${element.name}</h1>
                    </div>
                </a>
            </li>`;
    }

    let gameText = document.querySelector("#gameText");
    let color = ["♠", "❤", "♣", "♦"];

    function newHtml() {
        content.innerHTML = "";
        let newcardList = cardList.myarray(
            (item) => item.category === "werewolf"
        );
        // let newcardList = [
        //     {
        //         id: 1,
        //         category: "werewolf",
        //         name: "小狼人",
        //     },
        //     {
        //         id: 2,
        //         category: "werewolf",
        //         name: "小狼人",
        //     },
        //     {
        //         id: 8,
        //         category: "werewolf",
        //         name: "黑狼王",
        //     }
        // ];
        for (let index = 0; index < newcardList.length; index++) {
            let randomColor = color[Math.floor(Math.random() * color.length)];
            const element = newcardList[index];
            content.innerHTML += `<li>
                <a href="javascript:void(0)">
                    <div class="z">
                        <img src="./images/card.svg" alt="">
                    </div>
                    <div class="b">
                       <span class='cardnum'>${randomColor} ${element.id} </span>
                        <h1>
                           ${element.name}
                        </h1>
                    </div>
                </a>
            </li>`;
        }
        gameText.innerHTML = `恭喜你，成功找出${newcardList.length}个狼人!`;
    }

    let btnbox = document.querySelector(".btn");
    btnbox.addEventListener("click", function () {
        newHtml();
        let domb = document.querySelectorAll(".b");
        let domz = document.querySelectorAll(".z");
        setTimeout(() => {
            for (let index = 0; index < domb.length; index++) {
                const dombelement = domb[index];
                const domzelement = domz[index];
                dombelement.classList.add("rotateyzero");
                domzelement.classList.add("rotatey180");
            }
        }, 200);
    });
</script>
</body>
</html>
